<template>
  <div class="charging_edit">
    <el-card class="box-card">
      <div class="card_left">
        <div class="title">预览</div>
        <div class="detail" style="text-align: left">
          <el-form label-position="top" label-width="80px" :model="edit">
            <el-form-item label="停车位ID：">
              {{ edit.space_id }}
            </el-form-item>
            <el-form-item label="充电开始时间：">
              {{ edit.charging_start }}
            </el-form-item>
            <el-form-item label="充电结束时间：">
              {{ edit.charging_end }}
            </el-form-item>
            <el-form-item label="充电功率：">
              {{ edit.charging_power }}%
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="card_right" id="card_right" @scroll="handleScroll">
        <div class="title">编辑</div>
        <div class="card_right_time">
          <div class="stitle">充电开始——结束时间：</div>
          <div style="margin-top: 15px">
            <el-date-picker
              v-model="timeSection"
              value-format="yyyy-MM-dd hh:mm:ss"
              format="yyyy-MM-dd hh:mm:ss"
              type="datetimerange"
              :picker-options="pickerOptions"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="change"
              style="margin-top: 5px"
            >
            </el-date-picker>
          </div>
          <div class="stitle" style="margin-top: 25px">充电功率：</div>
          <div class="power" id="power_echart"></div>
          <div style="margin: 10px auto; width: 80%">
            <el-slider
              v-model="edit.charging_power"
              @change="powerChange"
            ></el-slider>
          </div>
          <div style="color: #848e8e">滑动滑轮调节功率</div>
        </div>
        <div style="position: absolute; bottom: 0; left: 10%">
          <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
        </div>
        <div style="position: absolute; bottom: 0; right: 5%">
          <el-button type="primary" @click="submit()"
            >提交<i class="el-icon-upload el-icon--right"></i
          ></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Charging_Edit",
  props: ["chargingData"],
  data() {
    return {
      edit: {
        space_id: 1,
        charging_start: "2021-10-25 10:09:08",
        charging_end: "2021-10-25 11:10:08",
        charging_power: 100.0,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeSection: [],
      percentage: 20,
    };
  },
  mounted() {
    const id = this.$route.params.id;
    let result = this.chargingData.find((item) => {
      if (item.space_id == id) {
        return item;
      }
    });
    this.edit = result;
    this.timeSection.push(this.edit.charging_start);
    this.timeSection.push(this.edit.charging_end);
    this.initEcharts();
    const scrollObj = document.getElementById("card_right");
    scrollObj.addEventListener("mousewheel", this.handleScroll, true);
  },
  methods: {
    //Echarts表盘
    initEcharts() {
      let powerData = this.edit.charging_power;
      const echarts = require("echarts/lib/echarts");
      require("echarts/lib/chart/gauge");

      var chartDom = document.getElementById("power_echart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            radius: "100%",
            type: "gauge",
            progress: {
              show: true,
              width: 3,
            },
            axisLine: {
              lineStyle: {
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 4,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 8,
              color: "#999",
              fontSize: 15,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 22,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: powerData,
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    refreshData(data) {
      const echarts = require("echarts/lib/echarts");
      require("echarts/lib/chart/gauge");
      var chartDom = document.getElementById("power_echart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            radius: "100%",
            type: "gauge",
            progress: {
              show: true,
              width: 2,
            },
            axisLine: {
              lineStyle: {
                width: 2,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 4,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 8,
              color: "#999",
              fontSize: 15,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 28,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: data,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    //修改事件
    change() {
      const startTime = this.timeSection[0];
      const endTime = this.timeSection[1];
      this.edit.charging_start = startTime;
      this.edit.charging_end = endTime;
    },
    handleScroll(e) {
      let direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        if (this.edit.charging_power < 100) this.edit.charging_power++;
        this.refreshData(this.edit.charging_power);
      } else {
        if (this.edit.charging_power > 0) this.edit.charging_power--;
        this.refreshData(this.edit.charging_power);
      }
    },
    powerChange() {
      this.refreshData(this.edit.charging_power);
    },
    back() {
      this.$router.go(-1);
    },
    submit() {
      this.axios
        .post("/charging/changeInfo", this.edit, {
          "Content-Type": "application/json",
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.back();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("修改充电信息失败");
        });
    },
  },
  destroyed: function () {
    window.removeEventListener("mousewheel", this.handleScroll);
  },
};
</script>

<style scoped>
.box-card {
  position: relative;
  margin: 5px auto;
  width: 95%;
  height: 75vh;
}
.card_left {
  display: flex;
  flex-direction: column;
  position: relative;
  float: left;
  width: 40%;
  height: 70vh;
}
.card_left:after {
  content: "";
  position: absolute;
  left: auto;
  top: auto;
  bottom: 15%;
  right: 0;
  height: 70%;
  width: 5px;
  background-color: #a9abb1;
}
.title {
  box-sizing: border-box;
  margin-top: 10px;
  width: 100%;
  height: 5vh;
  padding: 5px 10px;
  font-size: 1.3rem;
  font-weight: 600;
}
.detail {
  margin-top: 5px;
  width: 100%;
  height: 60vh;
  padding: 5px 10px;
  font-size: 1rem;
}
.detail /deep/ .el-form-item__label {
  font-weight: 550;
  font-size: 1rem;
}
.card_right {
  position: relative;
  float: right;
  width: 60%;
  height: 70vh;
}
.stitle {
  font-size: 1rem;
  font-weight: 550;
  text-align: left;
  color: #606266;
}
.card_right_time {
  margin: 15px auto;
  width: 90%;
  height: 55vh;
}
.power {
  margin: 5px auto;
  width: 60%;
  height: 25vh;
  font-size: 0.8rem;
}
</style>